<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性 方法 听诊器</title>
  <script src='vue/vue.js'></script>
</head>

<body>
  <div id="app">
    <div>{{firstName +" "+ lastNme}}</div>
    <div>{{fullName}}</div>
    <div>{{fullName2()}}</div>
    <div>{{fullName3}}</div>

  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        firstName: 'tan',
        lastNme: 'yp',
        firstName2: 'tan',
        lastNme2: 'jm',
        firstName3: 'tan',
        lastNme3: 'hl',
        fullName3: 'liu hl',
        age: '28'
      },
      // 计算属性
      computed: {
        fullName: function () { // 此处使用箭头函数找不到this
          console.log('计算了一次')
          return this.firstName + " " + this.lastNme
        }
      }, // 计算属性有缓存的值在里面，只有当依赖的属性变化时才会变化
      // 方法
      methods: {
        fullName2: function () {
          return this.firstName2 + " " + this.lastNme2
        }
      },
      watch: {
        // 第一次不执行
        firstName3: function () {
          this.fullName3 = this.firstName3 + " " + this.lastNme3
        },
        lastName3: function () {
          this.fullName3 = this.firstName3 + " " + this.lastNme3
        }
      }
    })
  </script>
</body>

</html>